<template>
	<d-box ref="rePop" :title="wtit">
		<div class="pop_content">

			<div class="odevInfo">
				<div class="pop_t">
					<div class="tit" v-for="i in popTopContent">
						<span>{{i.name}}</span>
						<span class="f2">{{i.value}}</span>
					</div>
				</div>
				<div class="br"></div>
				<!-- 房间信息 -->
				<div class="buildInfo">
					<s-list :head="rmHead" :rows="rmList"
						headStl="color:rgb(59 162 217);font-weight: bold; background-color: rgb(67 98 147 / 80%);"
						:hasSearch="false"></s-list>
				</div>
			</div>

		</div>
	</d-box>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";

	import dBox from "cmpt/drag-box.vue";
	import sList from "cmpt/table.vue";

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	const space2 = ref();

	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dat: {
			type: Object
		},
		space2: {}
	});


	function cItem(n, v) {
		return {
			name: n,
			value: v || ""
		}
	}

	const wtit = ref(""),
		jkMenu = ref([]),
		rePop = ref();

	watch(rePop, w => {
		w.hid();
	});


	//房间信息
	const rmList = ref([]),
		rmHead = [{
			k: 'departId',
			v: '科室编号'
		}, {
			k: 'departName',
			v: '科室名称'
		}, {
			k: 'distributionValue',
			v: '分配占比%'
		}];
	const popTopContent = ref([
		cItem("编号"),
		cItem("名称"),
		cItem("房间功能")
	]);
	const show = (rmId) => {

		rePop.value.show();
		wtit.value = "房间信息";
		props.space2.getData(rmId).then(r => {
			let info = r.list[0];
			if (info) {
				let rm = info.spaceName;
				wtit.value = wtit.value + "-" + rm;
				popTopContent.value[0].value = info.spaceCode;
				popTopContent.value[1].value = rm;
				popTopContent.value[2].value = info.spaceUseName;
				rmList.value = info.distributionList;
			}
			rePop.value.closeWait();
		});

	}



	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		show
	});
	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">
	.pop_content {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;

		.buildInfo {
			height: 100px;
		}

		span {
			max-width: 100px;
		}

		.report {
			ul {
				max-height: 100px;
				overflow-y: scroll;
				margin: 0;
				padding: 0;
				list-style: none;

				li {
					position: relative;
					padding: 6px 0;
					margin-left: 5px;

					color: #B6D0F7;
					padding-left: 14px;
				}

				li::before {
					content: '';
					display: inline-block;
					position: absolute;
					background-color: #2FD6E9;
					border-radius: 8px;
					width: 9px;
					height: 9px;
					left: 0;
					top: 12px;
					margin-right: 10px;
				}

				li::after {
					content: "";
					position: absolute;
					width: 0px;
					height: 100%;
					border-left: 1px solid #2FD6E9;
					top: calc(50% - 6px);
					left: 4px;
				}
			}
		}

		.dinfo,
		.pop_t {

			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 480px;

			.tit {
				color: #B6D0F7;
			}
		}

		.br {
			height: 2px;
			background: linear-gradient(90deg, transparent, #58b5e3 50%, transparent);
			margin: 14px 0;
		}

		.iitm,
		p {
			margin: 4px 0;
			color: #B6D0F7;
			line-height: 20px;
			display: flex;
			align-items: flex-end;
			flex-direction: row;
			flex-wrap: nowrap;
		}

		.iitm {
			display: inline-block;
			margin-right: 20px;
			line-height: 50px;
		}

		.f2 {
			margin-left: 8px;
			color: #BFCCD9;
			margin-bottom: -3px;
		}
	}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>